window.addEventListener('load', function() {
    const preview_img = document.querySelector('.preview_img')
    const mark = document.querySelector('.mark');
    const big = document.querySelector('.big');
    const bigImg = big.children[0];
    // 1．当我们鼠标经过 preview_img 就显示和隐藏mask 遮挡层和 big大盒子
    preview_img.addEventListener('mouseover', function() {
        mark.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout', function() {
        mark.style.display = 'none';
        big.style.display = 'none';
    });

    // 2. 鼠标移动时，让黄色盒子跟着鼠标走
    preview_img.addEventListener('mousemove', function(e) {
        // 2.1 获取鼠标在盒子内的坐标
        let x = e.pageX - this.offsetLeft;
        let y = e.pageY - this.offsetTop;
        // 2.2 减去盒子高度300的一半是150就是我们mask的最终 left和top值了
        let markX = x - mark.offsetWidth / 2;
        let markY = y - mark.offsetHeight / 2;
        // 2.3 边界值判断
        let maxMarkX = 400 - mark.offsetWidth;
        let maxMarkY = 400 - mark.offsetHeight;
        markX = Math.min(Math.max(markX, 0), maxMarkX);
        markY = Math.min(Math.max(markY, 0), maxMarkY);
        mark.style.left = markX + 'px';
        mark.style.top = markY + 'px';

        // 3. 黄色盒子移动时，大盒子也跟着移动
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        let bigX = markX * (bigImg.offsetWidth - big.offsetWidth) / maxMarkX;
        let bigY = markY * (bigImg.offsetHeight - big.offsetHeight) / maxMarkY;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    });
});